import Font0 from '@/assets/0.png';
import Font1 from '@/assets/1.png';
import Font2 from '@/assets/2.png';
import Font3 from '@/assets/3.png';
import Font4 from '@/assets/4.png';
import Font5 from '@/assets/5.png';
import Font6 from '@/assets/6.png';
import Font7 from '@/assets/7.png';
import Font8 from '@/assets/8.png';
import Font9 from '@/assets/9.png';

const FontMap = {
  '0': Font0,
  '1': Font1,
  '2': Font2,
  '3': Font3,
  '4': Font4,
  '5': Font5,
  '6': Font6,
  '7': Font7,
  '8': Font8,
  '9': Font9,
};

export default function useCustomNumberFont() {
  function renderNode(props: { value: number }) {
    const toInteger = Math.floor(props.value); //取2位整数
    const nArr = toInteger.toString().split('');
    return (
      <>
        {nArr.map((key, index) => (
          <span key={index} className="w-[50px] h-[70px] -mx-[8px] block bg-center bg-no-repeat" style={{
            backgroundSize: 'auto 100%',
            backgroundImage: `url(${FontMap[key as keyof typeof FontMap]})`
          }} />
        ))}
      </>
    );
  }

  return {
    renderNode,
  };
}
